<template>
  <!-- 新闻中心 -->
  <div class="body newsCenter" @click="$emit('newsFun', true)">
    <div class="titleBox">
      <img src="../../assets/projectDescription.png" alt="" class="titlebg" />
      <p class="title">新闻中心</p>
    </div>
    <div class="main">
      <ul>
        <template v-for="(item, index) in newsList">
          <li
            class="newscell"
            :key="index"
            v-if="index <= 3"
            @click.stop="newsDetail(item)"
          >
            <div>
              <p class="line-clamp1">{{ item.title }}</p>
              <span>{{ item.createTime }}</span>
            </div>
            <img :src="item.titlePic" alt="" />
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "@/util/api";
export default {
  name: "newsCenter",
  data() {
    return {
      msg: "newsCenter",
      pageNum: 1,
      pageSize: 4,
      newsList: [],
    };
  },
  mounted() {
    this.getNewsList();
  },
  methods: {
    // 新闻详情
    newsDetail(data) {
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "newsDetailShow",
        cont: true,
      });
      that.$store.dispatch("changeFun", {
        str: "newsDetails",
        cont: data,
      });
    },
    // 获取最新的几条新闻
    getNewsList() {
      api.getNewsList(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        (res) => {
          console.log(res);
          this.newsList = res.data.list;
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.newsCenter {
  width: 100%;
  height: 100%;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    padding: 20px;
    box-sizing: border-box;
    ul {
      width: 100%;
      height: auto;
      .newscell {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        cursor: pointer;
        img {
          width: 60px;
          height: 40px;
        }
        .line-clamp1 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        div {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          p:hover {
            width: fit-content;
            border-bottom: 1px solid #fff;
            cursor: pointer;
          }
        }
        span {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: rgba(251, 251, 251, 0.5);
          margin-top: 3px;
        }
      }
    }
  }
}
</style>
